<template>
   <el-form ref="ruleFormRef" v-loading="loading" :inline="true" :rules="rules" :model="form" label-width="120px">
    <el-form-item label="订单创建时间:" prop="createTime">
      <el-col>
        <el-date-picker disabled   v-model="form.createTime" type="datetime" placeholder="选择创建时间" format="YYYY/MM/DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss " />
      </el-col>
    </el-form-item>
    <el-form-item label="订单状态:" prop="orderStatus">
      <el-select v-model="form.orderStatus" disabled  placeholder="请选择订单状态">
        <el-option v-for="item in orderstatus" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
      </el-select>
    </el-form-item>
    <el-form-item label="订单id:" prop="orderId">
      <el-input disabled  v-model="form.orderId" />
    </el-form-item>
    <el-form-item label="客户姓名:" prop="clientName">
      <el-input v-model="form.clientName" />
    </el-form-item>
    <el-form-item label="客户电话:" prop="phone">
      <el-input v-model="form.phone" />
    </el-form-item>
    <el-form-item label="地址:" prop="address">
      <el-input v-model="form.address" />
    </el-form-item>
    <el-form-item label="合作方:" prop="partner">
      <el-input v-model="form.partner" />
    </el-form-item>
    <el-form-item label="客户经理:" prop="orderManager"> 
      <el-tree-select v-model="form.orderManager" :data="data" :render-after-expand="false" placeholder="请选择客户经理" />
    </el-form-item>
    <div v-if="showexpectMoney">
      <el-form-item label="预估金额:" prop="estimatedAmount">
      <el-input v-model="form.estimatedAmount" />
    </el-form-item>
    </div>
    <el-form-item label="定金金额:" prop="reserveAmount">
      <el-input v-model="form.reserveAmount" />
    </el-form-item>
    <el-form-item label="合同金额:" prop="amount">
      <el-input v-model="form.amount" />
    </el-form-item>
    <el-form-item label="备注:">
      <el-input v-model="form.comment" type="textarea" style="width: 400px" />
    </el-form-item>
  </el-form>
  <FlowChart :orderid="OrderIDValue"/>
  <div class="_button">
    <el-button type="primary" size="large" @click="onSubmit(ruleFormRef)">保存</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, watch,defineEmits } from 'vue'
import { OrderListData,tbOrderUpdate } from '/@/api/tb/tbOrder'
import { tbDictList } from '/@/api/tb/tbDictType'
import FlowChart from '../../Util_Form/FlowChart.vue';
import { ElMessage } from 'element-plus'
import {GetWhole} from "../../Util_Function/getOrderWhole"
const props = defineProps({
  orderid:String,
})
const OrderIDValue=ref('0')
const form = reactive({
  orderId: '', // 订单号
  createTime: '', // 订单创建时间
  clientName: '', // 客户姓名
  phone: '', // 联系电话
  address: '', // 地址
  partner: '', // 合作方
  orderManager: '', // 客户经理
  orderStatus: '', // 订单状态
  reserveAmount: '', // 定金金额
  amount: '', // 合同金额
  afterSales: '', // 是否有售后（0无售后，1有售后）
  afterSalesOrder: '', // 售后补单编号
  comment: '', // 备注
  estimatedAmount:''//预估金额

})
const showexpectMoney=ref(true)
const emit = defineEmits(['editForm'])
const loading=ref(true)
const data=ref([])
const ruleFormRef = ref<any>()
const orderstatus = ref([])
watch(
    () => props.orderid, //这样才可以检测到对象里面的值
    async() => {
      loading.value=true
      for (let key in form) {
        form[key]=''
  }
    OrderIDValue.value = props.orderid
    const res= await OrderListData({orderId:props.orderid})
    if(res.list){
        for (let key in form) {
        form[key]=res.list[0][key]
  }
    }
    getOffices()
  },
   {immediate:true} 
)
const getOffices=async ()=>{
  const status = await tbDictList({ dict: 'the_order_status' })
  orderstatus.value=status.data
  for (let index = 0; index < status.data.length; index++) {
    if(form.orderStatus==status.data[index].dictLabel){
      if (index<2) {
        showexpectMoney.value=false
      }else{
        showexpectMoney.value=true
      }
    }
  }
  data.value = await GetWhole();
  if(data.value.length&&orderstatus.value.length){
    loading.value=false
  }
}
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate( async(valid) => {
    if (valid) {
      const res = await tbOrderUpdate(form)
  if(res.result){ 
    for (let key in form) {
        form[key]=''
  }
    emit('editForm') 
    ElMessage({
    message:res.message,
    type: 'success',
  })
  }else{
    ElMessage.error(res.message)
  }} 
  })
}
const rules = reactive({
  orderId: [{ required: true,message: '请输入订单编号',trigger: 'blur'}],
  createTime: [{ required: true,message: '请输入订单创建时间',trigger: 'blur'}],
  clientName: [{ required: true,message: '请输入客户姓名',trigger: 'blur'}],
  phone: [{ required: true,message: '请输入联系电话',trigger: 'blur'}],
  address: [{ required: true,message: '请输入地址',trigger: 'blur'}],
  partner: [{ required: true,message: '请输入合作方',trigger: 'blur'}],
  orderManager: [{ required: true,message: '请选择客户经理',trigger: 'change'}],
  orderStatus: [{ required: true,message: '请选择订单状态',trigger: 'change'}],
  reserveAmount: [{ required: true,message: '请输入定金金额',trigger: 'blur'}],
  amount: [{ required: true,message: '请输入合同金额',trigger: 'blur'}],
  afterSales: [{ required: true,message: '请选择是否有售后',trigger: 'change'}],
  estimatedAmount: [{ required: true,message: '请输入预估金额',trigger: 'blur'}],

})
</script>
<style lang="less" scoped>
._button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 50px;
}
.el-input{
  width: 300px;
}

</style>
